<template>
<div class="use-home">
  <div class="use">
    <div class="use-title">{{$t('user.use1')}}</div>
    <div class="use-menu">
      <div class="use-title-smal">{{$t('user.use2')}}</div>
      <div class="use-text">{{$t('user.use3')}}</div>
      <div class="use-title-bg">{{$t('user.use4')}}</div>
      <div class="use-text">{{$t('user.use5')}}</div>
      <div class="use-text">{{$t('user.use6')}}</div>
      <div class="use-text">{{$t('user.use7')}}</div>
      <div class="use-text">{{$t('user.use8')}}</div>
      <div class="use-text">{{$t('user.use9')}}</div>
      <div class="use-text">{{$t('user.use10')}}</div>
      <div class="use-text-menu">
        <div class="use-text-top">
          <span>{{$t('user.use11')}}</span>
          <span>{{$t('user.use12')}}</span>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use13')}}</div>
          <div class="use-text">{{$t('user.use14')}}
            <a target="_blank" class="redClo" href="https://www.binance.com">https://www.binance.com</a>
          </div>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use15')}}</div>
          <div class="use-text">{{$t('user.use16')}}</div>
        </div>
      </div>
      <div class="use-text-menu">
        <div class="use-text-top">
          <span>{{$t('user.use17')}}</span>
          <span>{{$t('user.use18')}}</span>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use19')}}</div>
          <div class="use-text">{{$t('user.use20')}}
            <a target="_blank" class="redClo" href="https://www.tokenpocket.pro">https://www.tokenpocket.pro</a>
          </div>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use21')}}</div>
          <div class="use-text">{{$t('user.use22')}}</div>
        </div>
      </div>
      <div class="use-text-menu">
        <div class="use-text-top">
          <span>{{$t('user.use23')}}</span>
          <span>{{$t('user.use24')}}</span>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use25')}}</div>
          <div class="use-text">{{$t('user.use26')}}</div>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use27')}}</div>
          <div class="use-text">{{$t('user.use28')}}</div>
          <div class="use-text">{{$t('user.use29')}}</div>
        </div>
      </div>
      <div class="use-text-menu">
        <div class="use-text-top">
          <span>{{$t('user.use30')}}</span>
          <span>{{$t('user.use31')}}</span>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use32')}}</div>
          <div class="use-text">{{$t('user.use33')}}</div>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use34')}}</div>
          <div class="use-text">{{$t('user.use35')}}</div>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use36')}}</div>
          <div class="use-text">{{$t('user.use37')}}</div>
        </div>
      </div>
      <div class="use-text-menu">
        <div class="use-text-top">
          <span>{{$t('user.use38')}}</span>
          <span>{{$t('user.use39')}}</span>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use40')}}</div>
        </div>
      </div>      
      <div class="use-text-menu">
        <div class="use-text-top">
          <span>{{$t('user.use41')}}</span>
          <span>{{$t('user.use42')}}</span>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use43')}}</div>
          <div class="use-text">{{$t('user.use44')}}</div>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use45')}}</div>
          <div class="use-text">{{$t('user.use46')}}</div>
        </div>        
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use47')}}</div>
          <div class="use-text">{{$t('user.use48')}}</div>
        </div>
        <div class="use-text-line">          
          <div class="use-text">{{$t('user.use49')}}</div>
        </div>
      </div>      
      <div class="use-title-smal">{{$t('user.use50')}}</div>      
      <div class="use-text-menu">
        <div class="use-text">{{$t('user.use51')}}
          <a target="_blank" class="redClo" href="https://metamask.io">https://metamask.io</a>
        </div>
      </div>
      <div class="use-text">{{$t('user.use52')}}</div>
      <div class="use-text">{{$t('user.use53')}}</div>      
      <div class="use-text">{{$t('user.use54')}}</div>
      <div class="use-text">{{$t('user.use55')}}</div>
      <div class="use-text">{{$t('user.use56')}}</div>
      <div class="use-text">{{$t('user.use57')}}</div>
      <div class="use-text-menu">
        <div class="use-text">{{$t('user.use58')}}</div>
      </div>
    </div>
    <div class="use-return" @click="jump">{{$t('user.use59')}}</div>
  </div>
</div>
</template>

<script>
export default {
  name: 'employ',
  data () {
    return {
    }
  },  
  mounted() {
  },
  computed: {
  },
  methods: {
    jump(){
      this.$emit('close');
    }
  }
}
</script>

<style scoped lang="scss">
.redClo{
  color: #FC1212!important;
}
@media only screen and (min-width: 0px) and (max-width: 639px){
  .use{
    width: 100%;
    padding: 20px 12px;
    background-image: url(../assets/sub-bg.jpg);
    background-size:100% 100%;
    font-size: 12px;
    text-align: left;
    padding-bottom: 0px;
    .use-return{
      width: 200px;
      height: 40px;
      line-height: 38px;
      background-image: linear-gradient(to bottom, #E75607, #FF9C00, #FFD89A);
      border: 1px solid #514822;
      margin-right: 15px;
      border-radius: 20px;
      position: relative;
      top: -38px;
      text-align: center;
      margin: 0 auto;
      font-size: 16px;
      text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
    }
    .use-title{
      font-size: 24px;
      font-weight: bold;
      color: #E57B3B;
      text-align: center;
    }
    .use-menu{
      width: 100%;
      padding: 38px 25px;
      background-image: url(../assets/sub-box-bg.png);
      background-size:100% 100%;
      position: relative;
      top: -19px;
    }
    .use-title-smal{
      font-size: 14px;
      padding-bottom: 8px;
      color: #3bcbe5;
    }
    .use-text{
      font-size: 10px;
      padding-bottom: 4px;
    }
    .use-title-bg{
      width: 162px;
      height: 26px;
      line-height: 26px;
      font-size: 13px;
      background: #E57B3B;
      transform:skew(-20deg);
      margin: 0px auto;
      margin-top: 10px;
      margin-bottom: 10px;
      text-align: center;
      color: #0C0407;
      font-weight: bold;
    }
    .use-text-menu{
      padding: 10px 0px;
      .use-text-top{
        >span:nth-child(1){
          display: inline-block;
          height: 20px;
          line-height: 18px;
          background: #E57B3B;
          padding: 0px 5px;
          color: #0C0407;
          font-size: 13px;
          font-weight: bold;
          margin-right: 2px;
        }
      }
      .use-text-line{
        padding: 5px 0px;
      }
    }
  }
}
// pc端样式
@media only screen and (min-width: 640px) {
  .use-home{
    width: 100%;
    background-image: url(../assets/sub-bg.jpg);
    background-size:100% 100%;
    font-size: 12px;
    text-align: left;
    .use{
        width: 800px;
        margin: 0 auto;
        padding: 80px 40px;
        .use-return{
          width: 200px;
          height: 40px;
          line-height: 38px;
          background-image: linear-gradient(to bottom, #E75607, #FF9C00, #FFD89A);
          border: 1px solid #514822;
          margin-right: 15px;
          border-radius: 20px;
          position: relative;
          top: -10px;
          text-align: center;
          margin: 0 auto;
          font-size: 16px;
          text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
        }
        .use-title{
          font-size: 24px;
          font-weight: bold;
          color: #E57B3B;
          text-align: center;
        }
        .use-menu{
          width: 100%;
          padding: 60px 60px;
          background-image: url(../assets/sub-box-bg.png);
          background-size:100% 100%;
        }
        .use-title-smal{
          font-size: 14px;
          padding-bottom: 12px;
        }
        .use-text{
          font-size: 10px;
          padding-bottom: 4px;
        }
        .use-title-bg{
          width: 232px;
          height: 26px;
          line-height: 26px;
          font-size: 16px;
          background: #E57B3B;
          transform:skew(-20deg);
          margin: 0px auto;
          margin-top: 20px;
          margin-bottom: 20px;
          text-align: center;
          color: #0C0407;
          font-weight: bold;
        }
        .use-text-menu{
          padding: 10px 0px;
          .use-text-top{
            >span:nth-child(1){
              display: inline-block;
              height: 20px;
              line-height: 18px;
              background: #E57B3B;
              padding: 0px 5px;
              color: #0C0407;
              font-size: 13px;
              font-weight: bold;
              margin-right: 2px;
            }
          }
          .use-text-line{
            padding: 5px 0px;
          }
        }
      }
  }
  .use{
    width: 100%;
    padding: 20px 12px;
    // background-image: url(../assets/sub-bg.jpg);
    background-size:100% 100%;
    font-size: 12px;
    text-align: left;
    padding-bottom: 0px;
    .use-return{
      width: 200px;
      height: 40px;
      line-height: 38px;
      background-image: linear-gradient(to bottom, #E75607, #FF9C00, #FFD89A);
      border: 1px solid #514822;
      margin-right: 15px;
      border-radius: 20px;
      position: relative;
      top: -38px;
      text-align: center;
      margin: 0 auto;
      font-size: 16px;
      text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
    }
    .use-title{
      font-size: 24px;
      font-weight: bold;
      color: #E57B3B;
      text-align: center;
    }
    .use-menu{
      width: 100%;
      padding: 38px 25px;
      background-image: url(../assets/sub-box-bg.png);
      background-size:100% 100%;
      position: relative;
      top: -19px;
    }
    .use-title-smal{
      font-size: 14px;
      padding-bottom: 8px;
      color: #3bcbe5;
    }
    .use-text{
      font-size: 10px;
      padding-bottom: 4px;
    }
    .use-title-bg{
      width: 232px;
      height: 26px;
      line-height: 26px;
      font-size: 13px;
      background: #E57B3B;
      transform:skew(-20deg);
      margin: 0px auto;
      margin-top: 10px;
      margin-bottom: 10px;
      text-align: center;
      color: #0C0407;
      font-weight: bold;
    }
    .use-text-menu{
      padding: 10px 0px;
      .use-text-top{
        >span:nth-child(1){
          display: inline-block;
          height: 20px;
          line-height: 18px;
          background: #E57B3B;
          padding: 0px 5px;
          color: #0C0407;
          font-size: 13px;
          font-weight: bold;
          margin-right: 2px;
        }
      }
      .use-text-line{
        padding: 5px 0px;
      }
    }
  }
}
</style>
